<template>
  <view style="background-color: #fff;">
    <view style="width: 100vw; height: 100vw; background-color: #f2f2f2;">
      <u-image height="100vw" width="100vw" v-if="!loading" :src="detail.goodsPic" :lazy-load="true" mode="aspectFit"></u-image>
    </view>
    <view style="padding: 24rpx">
      <u-skeleton rows="2" :loading="loading" :rowsHeight="64" titleWidth="80vw" :titleHeight="64">
        <view style="min-height: 200rpx; width: calc(100vw - 48rpx);">
          <up-text type="main" size="42" color="#000" :text="detail?.name || ''" ></up-text>
          <up-text type="" size="32" color="#a3a3a3" :text="detail?.description || ''" margin="24rpx 0 0" ></up-text>
          <view class="price">
            <view class="unit">￥</view>
            <view class="categoryPrice">{{ detail?.price }}</view>
          </view>
        </view>
      </u-skeleton>
    </view>
    <view style="width: 100vw; height: 28rpx; background-color: #f2f2f2;"></view>
    <u-cell-group>
      <u-cell title="数量">
        <template v-slot:value>
          <view @click.capture="openNumberModal">
            <u-number-box v-model="number" :min="1" integer :buttonSize="60" inputWidth="70" :disabledInput="true" :disabled="true" :disablePlus="true" :disableMinus="true"></u-number-box>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
    <view style="width: 100vw; height: 28rpx; background-color: #f2f2f2;"></view>
    <view style="padding: 24rpx" v-if="loading">
      <u-skeleton rows="2" :rowsHeight="64" titleWidth="80vw" :titleHeight="64">
        <view style="min-height: 200rpx; width: calc(100vw - 48rpx);"></view>
      </u-skeleton>
    </view>
    <view style="font-size: 0;">
      <u-image v-for="item in extList" width="100vw" height="100%" mode="widthFix" :src="item" :lazy-load="true"></u-image>
    </view>
    <view class="bottomWrap"></view>
    <view class="bottomWrap" style="position: fixed; bottom: 0; left: 0;">
      <view class="bottomLeftWrap">
        <view class="bottomLeftItem" @click="toSwitchTab('/pages/index/index')">
          <image src="../../static/tab/home.png"/>
          <view>首页</view>
        </view>
        <view class="bottomLeftItem" @click="toSwitchTab('/pages/shop/index')">
          <image src="../../static/tab/all-category.png"/>
          <view>产品</view>
        </view>
      </view>
      <view class="leftBtn" style="background-color: #FDB51F;" @click="addShoppingCar">
        加入购物车
      </view>
      <view class="leftBtn" style="background-color: #79C435;" @click="buyProduct">
        立即购买
      </view>
    </view>
    <common-shopCard-modal :isLogin="isLogin"></common-shopCard-modal>
    <common-to-login-modal :show="showLoginModal" @cancel="showLoginModal=false"></common-to-login-modal>
    <u-popup :show="show" :round="24" mode="bottom" @close="closeShoppingCardModal" :closeable="true">
      <shoppingCardModal :number="number" :detail="detail" @valChange="valChange" @addShoppingCar="addShoppingCar" @buyProduct="buyProduct" />
    </u-popup>
  </view>
</template>

<script>
import { queryGoodsById } from '@/services/product';
import shoppingCardModal from './shoppingCardModal.vue';
import { addShoppingCar } from '@/services/shop';

export default {
  components: {
    shoppingCardModal,
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    }
  },
  data() {
    return {
      productId: '',
      detail: {},
      loading: true,
      number: 1,
      extList: [],
      show: false,
      showLoginModal: false,
    }
  },
  onLoad(option) {
    this.productId = option.id;
  },
  onShow() {
    this.requestDetail();
  },
  methods: {
    async requestDetail() {
      const { productId } = this;
      const _that = this;
      this.loading = true;
      queryGoodsById({
        goodsId: productId,
      }).then((res) => {
        const { success, data } = res;
        if (success) {
          _that.detail = data;
          _that.extList = data?.ext?.split(',') || [];
        }
      }).finally(() => {
         _that.loading = false;
      })
    },
    openNumberModal() {
      console.log('打开弹窗')
      this.show = true;
    },
    valChange(e) {
      console.log('当前值为: ' + e.value);
      this.number = e.value;
    },
    toSwitchTab(path) {
      uni.switchTab({
        url: path,
      })
    },
    closeShoppingCardModal() {
      this.show = false;
    },
    buyProduct() {
      if (this.$store.state.isLogin) {
        const { detail, number } = this;
        uni.navigateTo({
          url: `/pages/orderConfirmation/index`,
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('orderConfirmation', {
              data: [{
                detail: { ...detail, goodsId: detail.id },
                num: number,
              }],
            })
          }
        })
      } else {
        this.showLoginModal = true;
      }
    },
    async addShoppingCar() {
      if (this.$store.state.isLogin) {
        const res = await addShoppingCar({
          goodsId: this.detail.id,
        })
        if (res.success) {
          uni.$u.toast('加入购物车成功')
        } else {
          uni.$u.toast('加入购物车失败')
        }
      } else {
        this.showLoginModal = true;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  padding-bottom: 10rpx;
  margin-top: 32rpx;
}
.unit {
  color: #59B235;
  font-size: 24rpx;
}
.categoryPrice {
  color: #59B235;
  font-size: 36rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 600;
}
.bottomWrap {
  height: 108rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.bottomLeftWrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  width: 40%;
}
.bottomLeftItem {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 108rpx;
  color: rgba(0,0,0,.45);
  font-size: 26rpx;
}
.bottomLeftItem image {
  width: 48rpx !important;
  height: 48rpx !important;
}
.leftBtn {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40rpx;
}
</style>